<template>
  <div class="aboutUs">
    <TopSubfield>我是顶部</TopSubfield>
    <div class="about-container">
      <ul class="navbar">
        <li
          :class="navInd==item.id?'active':''"
          v-for="(item,index) in navs"
          :key="index"
          @click="handNav(item.id)"
        >{{item.name}}</li>
      </ul>
      <div class="content">
        <div class="banner">
          <img :src="navs[navInd].imgUrl" alt="图片">
        </div>
      </div>

      <article v-show="navInd==0">
        <section>
          <img class="logo" src="../../../../static/images/mtlogo.png" alt>
          <p>美团的使命是“帮大家吃得更好，生活更好”。作为中国领先的生活服务电子商务平台，公司拥有美团、大众点评、美团外卖、美团打车、摩拜单车等消费者熟知的App，服务涵盖餐饮、外卖、打车、共享单车、酒店旅游、电影、休闲娱乐等200多个品类，业务覆盖全国2800个县区市。2018年Q3,美团的总交易金额达1457亿元人民币，同比增加40%。截至2018年9月30日止过去十二个月，美团年度交易用户总数达3.8亿，平台活跃商家总数达550万。</p>
          <p>2018年9月20日，美团点评（股票代码：3690.HK）正式在港交所挂牌上市。</p>
          <p>
            当前，美团战略聚焦 Food +
            Platform，正以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。与此同时，美团正着力将自己建设成为一家社会企业，希望通过和党政部门、高校及研究院所、主流媒体、公益组织、生态伙伴等的深入合作，构建智慧城市，共创美好生活。
          </p>
        </section>
      </article>

      <div class="time-line" v-show="navInd==1">
        <div class="time-line-item" v-for="(item,index) in history" :key="index">
          <div class="year">{{item.year}}</div>
          <ul class="detail">
            <li class="item" v-for="(items,ind) in item.event" :key="ind">
              <h4>{{items}}</h4>
            </li>
          </ul>
        </div>
      </div>

      <div class="team-content" v-show="navInd==2">
        <ul class="team-list">
          <li class="item" v-for="(item,index) in teams" :key="index">
            <img :src="item.imgUrl" alt>
            <div class="detail">
              <h2>{{item.name}}</h2>
              <h3>{{item.Introduction}}</h3>
              <p>{{item.experience}}</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="product-content" v-show="navInd==3">
        <h1>业务产品</h1>
        <div class="split"></div>
        <section>
          <p>美团点评平台为消费者提供了多样的日常生活服务选择，如餐饮外卖、到店、酒店旅游服务、新业务及其他服务。有丰富的UGC数据库，为消费者提供大量在线POI的详细、真实及透明信息。</p>
          <p>我们为全国2800个市县3.1亿年度交易用户和约440万年度活跃商家提供了服务。2017年，美团点评平台交易笔数超过58亿笔，交易金额3570亿元。</p>
          <p>
            目前，美团点评旗下拥有美团、大众点评、美团外卖、摩拜单车
            、美团跑腿、小象生鲜、榛果民宿、美团打车等APP产品。
          </p>
        </section>
        <div class="product-intro">
          <div class="header">
            <span class="title">产品介绍</span>
            <div class="product-tab">
              <span
                :class="proInd==index?'active':''"
                v-for="(item,index) in product"
                :key="index"
                @click="handpro(index)"
              >{{item}}</span>
            </div>
          </div>
          <ul class="product-items" v-show="proInd==0">
            <li class="item" v-for="(item,index) in UserService" :key="index">
              <div>
                <img class="product-icon" :src="item.imgUrl">
              </div>
              <div class="detail">
                <h4>{{item.introduction}}</h4>
                <p class="text">{{item.description}}</p>
              </div>
            </li>
          </ul>
          <ul class="product-items" v-show="proInd==1">
            <li class="item" v-for="(item,index) in MerchantService" :key="index">
              <div class="business">
                <img class="business-icon" :src="item.imgUrl" :alt="item.name">
              </div>
              <div class="detail">
                <a href="http://e.waimai.meituan.com/" target="_blank">{{item.name}}</a>
                <h4>{{item.introduction}}</h4>
                <p class="text">{{item.description}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="society-navbar" v-show="navInd==4">
        <ul>
          <li
            :class="socInd==index?'active':''"
            v-for="(item,index) in society"
            :key="index"
            @click="handsoc(index)"
          >{{item}}</li>
        </ul>
      </div>
      <div class="socity-content" v-show="navInd==4">
        <article class="article-content-about">
          <h1>{{ServSocia.title}}</h1>
          <div class="split"></div>
          <section>
            <p>{{ServSocia.p1}}</p>
            <h2>{{ServSocia.h21}}</h2>
            <p>{{ServSocia.p2}}</p>
            <h3 class="dot">{{ServSocia.h31}}</h3>
            <p v-for="item in ServSocia.ps1" :key="item">{{item}}</p>
            <div class="img">
              <img :src="ServSocia.img1" alt>
            </div>
            <h3 class="dot">{{ServSocia.h32}}</h3>
            <p v-for="item in ServSocia.ps2" :key="item">{{item}}</p>
            <h3 class="dot">{{ServSocia.h321}}</h3>
            <p v-for="item in ServSocia.ps3" :key="item">{{item}}</p>
            <h3 class="dot">{{ServSocia.h33}}</h3>
            <p>{{ServSocia.p3}}</p>
            <div class="img">
              <img :src="ServSocia.img2" alt>
            </div>
            <h3 class="dot">{{ServSocia.h34}}</h3>
            <p>{{ServSocia.p4}}</p>
            <div class="img">
              <img :src="ServSocia.img3" alt>
            </div>
            <h2>{{ServSocia.h22}}</h2>
            <p>{{ServSocia.p5}}</p>
            <div class="img">
              <img :src="ServSocia.img4" alt>
            </div>
          </section>
        </article>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import Footer from "@/components/bottom/footer";
export default {
  name: "aboutus",
  data() {
    return {
      product: ["用户服务", "商户服务"],
      proInd: 0,
      society: ["健康生活 绿色消费", "推动行业发展", "社会帮扶"],
      socInd: 0,
      UserService: [
        {
          id: 0,
          name: "美团",
          imgUrl: "../../../static/images/meituan.png",
          introduction: "生活服务线上交易平台",
          description:
            "平台以客户为中心，为消费者提供美食、旅游、酒店、外卖、电影等吃喝玩乐全都有的一站式生活服务。美团为消费者推荐多种优质且物超所值的本地生活服务，同时致力于帮助消费者发现好玩，新鲜的生活方式。"
        },
        {
          id: 1,
          name: "大众点评",
          imgUrl: "../../../static/images/dazong.svg",
          introduction: "生活信息线上搜索平台",
          description:
            "大众点评是全球本地生活独立第三方点评模式的开创者。2018年，我们首次推出《黑珍珠餐厅指南》，包含中国22个城市及5个外国城市326个顶级餐厅的名单。"
        },
        {
          id: 2,
          name: "美团外卖",
          imgUrl: "../../../static/images/meituanwaimai.svg",
          introduction: "提供即时配送服务",
          description:
            "全球领先的餐饮外卖服务提供商，2018年，美团点评单日外卖交易笔数超过2100万笔。2017年，美团点评餐饮外卖服务的年度交易金额为人民币1710亿元，日均活跃配送骑手数量约53.1万。"
        }
      ],
      MerchantService: [
        {
          id: 0,
          name: "美团外卖商家版",
          imgUrl: "../../../static/images/meituanwaimai.svg",
          introduction: "美团外卖商家业务管理系统的移动及个人电脑门户",
          description:
            "美团外卖商家版是美团外卖入驻美团商家使用的管理软件，主要功能是接受并处理用户订单，处理退款，账户在线结算，管理美团外卖的门店，随时调整营业信息、商品库存等。界面简洁，分类清晰，易操作，能帮助商户轻松管理店铺。"
        },
        {
          id: 1,
          name: "开店宝",
          imgUrl: "../../../static/images/kaidianbao.png",
          introduction: "轻松开店，招财进宝",
          description:
            "美团开店宝是美团点评商家后台APP，餐饮商家可以通过开店宝在线上自助入驻、快速开店，成为美团点评的合作商户。还可以在开店宝中进行自助推广、门店管理、评价维护等一系列自主运营活动。"
        },
        {
          id: 2,
          name: "别样红",
          imgUrl: "../../../static/images/beiyanghong.png",
          introduction: "专业的连锁和中小酒店云PMS和数据服务商",
          description:
            "成立于2013年，是美团旗下专注提供智慧酒店解决方案的创新型科技企业。"
        }
      ],
      ServSocia: [],
      socialService: [
        {
          id: 0,
          title: "健康生活 绿色消费",
          p1:
            "美团点评集团高度重视用户的健康与福祉，致力于携手社会各界为用户提供安全、健康、绿色的产品与服务，积极推进绿色消费倡导，促进企业发展与环境的和谐共生，为城市高质量发展、人民高品质生活贡献力量。",
          h21: "青山计划",
          p2:
            "外卖行业快速发展对环保带来的影响广受关注。美团外卖一直高度重视环保问题。2017年8月31日，美团外卖启动“青山计划”，致力于为外卖环保问题寻求系统性的解决方案。",
          h31: "探索外卖行业环保问题的全链条解决方案",
          ps1: [
            "（1）通过资源整合，研究设计外卖行业环保问题的全链条解决方案。并且积极引入政府部门、专业机构、专家学者的资源，通过社会共治提升平台环保工作能力。",
            "（2）与政府部门、科学机构、餐饮行业协会、环保企业、公益组织等共同策划推动外卖餐盒的环保化。积极响应发改委、环保部等政府主管部门的指导要求，配合出台绿色外卖相关指引性制度。",
            "（3）通过与地方合作，设立研究试点，持续关注和研究绿色外卖各环节环境问题的解决方案。"
          ],
          img1: "../../../static/images/society28.png",
          h32: "关注外卖餐盒使用周期的各个环节",
          ps2: [
            "（1）通过平台持续运营，减少美团外卖用户在外卖用餐过程中筷子、餐巾纸等一次性餐具的使用。以平台的力量，不断强化商家和消费者环保意识，引导用户自主选择“不使用一次性餐具”。",
            "（2）向用户、商户宣传科学的分类方法，并根据专家学者意见制定可执行的分类手段。",
            "（3）利用平台优势推进餐具回收、下游供应商材料循环利用、尽量选用可日常生活多次重复利用的外卖包装餐具材料。"
          ],
          h321: "设立“青山基金”",
          ps3: [
            "2017年9月25日，美团外卖联手中华环境保护基金会宣布设立“青山基金”，这是餐饮外卖行业首个绿色环保公益专项基金，先期投入300万资金，用于环保领域的路径研究及配套解决方案，保证项目实施有所依托。同时青山基金将着重关注环保生态扶贫项目及环保理念的传播。",
            "目前“青山基金”已与中华环境保护基金会启动“生态扶贫示范林”项目，共同确定项目开展思路，在生态恶化的贫困地区，通过资助改进农业生产方式，减少农药化肥使用量，减少面源污染，减轻水土流失，提高单位面积产出，从而达到保护生态环境和扶助贫困人口脱贫的目的。"
          ],
          h33: "青山公益行动",
          p3:
            "2018年3月12日植树节前夕，为了让更多商家和用户共同参与环保行动，美团外卖联合中华环境保护基金会正式启动“青山公益行动”，宣布将先期投入的300万“青山基金”以及青山公益商家所捐善款，用于公众环保意识宣导、生态扶贫以及环保研究等项目。",
          img2: "../../../static/images/society28.png",
          h34: "美团外卖环保日",
          p4:
            "从2017年9月开始，设立每月一天美团外卖“环保日”，通过美团外卖APP、微博、微信等宣传资源，面向消费者进行环保宣传，联合各类环保机构宣传环保理念及公益行动，提升公众环保意识。",
          img3: "../../../static/images/society28.png",
          h22: "青山合作伙伴计划",
          p5:
            "2018年8月30日，青山计划借成立一周年之际进行全方位升级，正式发布启用“青山合作伙伴计划”，将携手各界合作伙伴，从废弃源头减量、垃圾回收处理和环保公益推动三个层面探索外卖行业的可持续发展之道，并提出到2020年，希望携手100家以上外卖包装合作伙伴，寻求新的包装解决方案，尽可能地减少塑料外卖餐盒的废弃；联合100家以上循环经济合作伙伴，开展100家以上垃圾回收与循环利用试点，探寻行业可持续发展之路；汇聚超过10万家青山公益商家，通过青山基金和美团公益平台支持社会公益组织，发展环保公益。",
          img4: "../../../static/images/society28.png"
        },
        {
          id: 1,
          title: "推动行业发展",
          p1:
            "作为全球领先的一站式生活服务平台，美团点评始终秉承“帮大家吃得更好，生活更好”的企业使命，不断提升用户生活品质，为生活服务业提供以科技为核心的全面服务，持续发挥平台优势，通过多种举措助力行业人才发展，推动行业高质量发展。",
          h21: "城市新青年计划",
          p2:
            "2018年3月，美团点评与清华大学联合启动『城市新青年』计划，为以外卖骑手为代表的生活服务业从业人员发展提供支持，通过人才培养，提升生活服务业的行业竞争力。",
          h31: "",
          ps1: [
            "『城市新青年』计划首批联合清华大学启动两个项目：全国首个骑手心理热线以及骑手自强学堂。骑手心理热线由清华大学心理咨询中心提供专业支持，骑手在日常工作生活中遇到心理压力或难解情绪，可以拨打热线电话获得免费心理咨询；骑手自强学堂则由清华大学的学堂在线为外卖骑手提供在线课程学习平台，供骑手们可以在工作之余学习深造，成为更优秀的城市新青年。"
          ],
          img1: "../../../static/images/society28.png",
          h32: "“城市新青年-赢未来”公益行动",
          ps2: [
            "2018年5月4日，美团与中国发展研究基金会共同发起“城市新青年-赢未来”公益行动，旨在通过美团在互联网+生活服务的技术优势以及业务积累，与中国发展研究基金会在中国职业教育方面的学术研究成果及教育创新经验进行有效结合，探索新型职业教育模式，为当下中国高速发展的生活服务业培养优秀的专业化人才。",
            "在“城市新青年-赢未来”公益行动中，美团与中国发展研究基金会将在中职办学理念、课程设置、人才培训、职业规划、就业指导等多个方面开展广泛合作，包括组织行业知名专家参与“新航向”校长培训、“职引未来”学生训练营等项目，为“赢未来”计划试点学校校长、骨干教师及学生提供专业的课程辅导和能力培训。同时，美团互联网+大学开发的多类课程也将与赢未来计划网络平台合作，为中职学生提供更多的能力建设资源，推动中职学生的综合发展。"
          ],
          h32: "",
          ps3: [],
          h33: "",
          p3: "",
          img2: "../../../static/images/society28.png",
          h34: "",
          p4: "",
          img3: "",
          h22: "",
          p5: "",
          img4: ""
        },
        {
          id: 2,
          title: "社会帮扶",
          p1:
            "美团点评集团在业务高速发展的过程中，始终坚持使命驱动，积极探索如何利用科技和平台能力，助力更多社会问题的解决，创造更大的社会价值，成就新型社会企业。",
          h21: "美团公益",
          p2: "",
          h31: "",
          ps1: [
            "美团公益平台(gongyi.meituan.com)是由美团发起、定位于“互联网+公益”的服务平台，是民政部指定的第二批慈善组织互联网募捐信息平台之一。美团公益致力于通过创新科技，为网民搭建起安全、简单、便捷的公益捐赠渠道，为慈善组织提供均等化的信息发布和筹款服务，倡导将慈善精神融入中国网民的消费行为，为塑造更好的社会公益慈善环境贡献价值。",
            "美团公益于2018年6月正式上线，截至2018年8月，美团公益已经与包括中国扶贫基金会、中国社会福利基金会、壹基金等20余家国内具影响力的慈善组织开展合作，发布项目覆盖教育助学、医疗救助、环境保护等多个领域。",
            "目前美团公益已经开放城市入口，逐步探索“地方公益”，号召不同城市的用户关注身边的公益项目，并为家乡的公益事业贡献力量。未来美团公益还将致力于让公益融入用户日常生活消费的不同场景，培养公众的捐赠习惯，传播公益慈善文化。"
          ],
          img1: "../../../static/images/society28.png",
          h32: "美团点评学龄前儿童营养午餐项目",
          ps2: [
            "2018年1月16日，美团点评携手联合国世界粮食计划署（WFP）、公益餐厅共同发起为3-5岁学龄前儿童提供营养午餐的创新性合作，致力于“帮孩子们吃得更好”。经过近半年的试运营，项目已面向美团点评的餐饮商户们开放合作，希望联合更多的合作伙伴一起践行社会责任。",
            "学龄前儿童营养午餐项目包括募集营养补助金、提供一年营养补助、开展健康饮食课堂和为贫困农户创收这四大模块。",
            "1、美团点评平台将上线“营养午餐”套餐。参与项目的公益餐厅承诺将营养午餐的套餐销售所得捐助给此次行动，用于为项目区的儿童提供营养补助。",
            "2、美团点评将联合参与捐助的公益餐厅一起，定期下乡到项目区为孩子们制作午餐，根据中国营养学会营养标准制定多样化、季节性菜单，并将制作方法传授给幼儿园厨师。",
            "3、大厨下乡除了为孩子们定制午餐外，还向孩子们开展儿童营养知识宣教活动，提高儿童对营养知识、健康饮食的认知。",
            " 4、响应国家精准扶贫政策，配合联合国世界粮食计划署对项目区贫困户实施精准帮扶，有效增加农民收入、提升市场价值链的能力。"
          ],
          h32: "",
          ps3: [],
          h33: "",
          p3: "",
          img2: "../../../static/images/society28.png",
          h34: "",
          p4:
            "学龄前儿童营养午餐项目将持续到2020年，预期根据国家标准降低项目区儿童营养不良率，并以试点撬动政府投入，促进政策发展，为更大范围推广提升项目提供实证基础。",
          img3: "",
          h22: "",
          p5: "",
          img4: ""
        }
      ],
      navs: [
        {
          id: 0,
          name: "基本介绍",
          imgUrl: "./../../../static/images/banner-1.jpg"
        },
        {
          id: 1,
          name: "发展历史",
          imgUrl: "./../../../static/images/banner-2.png"
        },
        {
          id: 2,
          name: "管理团队",
          imgUrl: "./../../../static/images/banner-3.png"
        },
        {
          id: 3,
          name: "业务产品",
          imgUrl: "./../../../static/images/banner-4.png"
        },
        {
          id: 4,
          name: "社会企业",
          imgUrl: "./../../../static/images/banner-5.png"
        }
      ],
      navInd: 0,
      teams: [
        {
          id: 0,
          name: "王兴",
          Introduction: "联合创始人、董事长兼首席执行官",
          experience:
            "王兴在互联网行业拥有超过10年的管理及创业经验。2005年创立中国第一个大学生社交网站校内网（后更名为人人网），2007年创立社交媒体网站饭否网，2010年创立美团。王兴于2001年获清华大学电子工程学士学位，并于2005年获美国特拉华大学计算机工程硕士学位。",
          imgUrl: "../../../static/images/wangxin.png"
        },
        {
          id: 1,
          name: "穆荣均",
          Introduction:
            "联合创始人、执行董事、高级副总裁，分管金融服务平台、公司事务平台",
          experience:
            "穆荣均于2005年至2007年在百度担任高级软件工程师及项目经理。2007年联合创立饭否网，并担任技术总监，2010年联合创立美团。穆荣均分别于2002年和2005年获得清华大学自动化工程学士学位和计算机科学与技术硕士学位。",
          imgUrl: "../../../static/images/murongjun.png"
        },
        {
          id: 2,
          name: "王慧文",
          Introduction:
            "联合创始人、执行董事、高级副总裁，分管LBS平台、用户平台",
          experience:
            "2005年联合创立校内网，2009年创立淘房网，2010年加入美团。王慧文于2001年获清华大学电子工程学士学位。",
          imgUrl: "../../../static/images/wanghuiwen.png"
        },
        {
          id: 3,
          name: "陈少晖",
          Introduction: "首席财务官、高级副总裁，分管财务平台、战略与投资平台",
          experience:
            "曾任职科尔尼管理咨询公司及美国中经合集团，2011年起担任腾讯投资执行董事，2014年加入美团。2018年7月，陈少晖获委任为北京光线传媒股份有限公司董事。陈少晖于2004年获北京大学经济学学士学位，并于2010年获哈佛大学工商管理硕士学位。",
          imgUrl: "../../../static/images/chenshaohui.png"
        },
        {
          id: 4,
          name: "陈亮",
          Introduction: "高级副总裁，分管小象事业部",
          experience:
            "2002年起先后任职广州通信研究所软件工程师、深圳天时通科技有限公司首席技术官。2005年参与创立校内网，2007年起加入雅虎通信事业部，2008年联合创立淘房网，并于2011年加入美团。陈亮于2002年获华南理工大学机电工程学士学位。",
          imgUrl: "../../../static/images/chenliang.jpg"
        },
        {
          id: 5,
          name: "张川",
          Introduction: "高级副总裁，分管到店事业群",
          experience:
            "曾分别就职教育部信息中心、用友软件，2006年起担任百度产品总监，并于2011年起担任58同城执行副总裁，2017年加入美团点评。张川于1997年获北京师范大学计算机科学学士学位，2003年获清华大学工商管理硕士学位。",
          imgUrl: "../../../static/images/zhangchuan.png"
        }
      ],
      history: [
        {
          year: "2018",
          event: [
            "2018年10月，战略聚焦Food +Platform并对组织体系进行升级",
            "2018年9月，美团点评（股票代码：3690.HK）正式在港交所挂牌上市",
            "2018年，美团点评单日外卖交易笔数超过2100万笔",
            "2018年，收购共享单车品牌摩拜单车，进一步增加我们向消费者提供的服务组合",
            "2018年，美团点评发布“大众点评黑珍珠餐厅指南”，包括国内22个城市，海外5个代表大都市，326个顶级餐厅名单"
          ]
        },
        {
          year: "2017",
          event: [
            "2017年，推出生鲜超市业务，进一步扩展即时配送服务至生鲜及其他非餐饮外卖类别",
            "2017年，平台交易笔数超过58亿",
            "2017年，年度交易金额达3570亿人民币",
            "2017年，为3.1亿名交易用户及440万名活跃商家提供了服务",
            "2017年，国内酒店间夜量超过2亿"
          ]
        },
        {
          year: "2016",
          event: ["2016年，推出面向商家的服务，如聚合支付系统及供应链解决方案"]
        },
        {
          year: "2015",
          event: [
            "2015年，美团与大众点评进行战略性交易，更好地扩展到店餐饮及生活服务品质"
          ]
        },
        {
          year: "2014",
          event: ["2014年，推出旅游门票预订服务"]
        },
        {
          year: "2013",
          event: ["2013年，推出酒店预订及餐饮外卖服务"]
        },
        {
          year: "2012",
          event: ["2012年，推出电影票线上预订服务"]
        },
        {
          year: "2011",
          event: ["2010年，美团网创立"]
        },
        {
          year: "2003",
          event: ["2003年，大众点评网创立"]
        }
      ]
    };
  },
  components: {
    TopSubfield,
    Footer
  },
  methods: {
    handNav(ind) {
      this.navInd = ind;
      if (ind == 4) {
        this.ServSocia = this.socialService[this.socInd];
      }
      console.log("ServSocia:", this.ServSocia);
    },
    handpro(ind) {
      this.proInd = ind;
    },
    handsoc(ind) {
      this.socInd = ind;
      this.ServSocia = this.socialService[ind];
    }
  }
};
</script>

<style lang="less" scoped>
.aboutUs {
  padding: 0 5%;
  background: #ebebeb;
  .about-container {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    .about-container > .content > div {
      position: relative;
    }
    .navbar {
      margin: 0 auto;
      width: 60%;
      height: 1rem;
      font-size: 14px;
      color: #999;
              display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
      .active {
        color: red;
      }
      li {
        display: inline-block;
        // padding: 0 0.74rem;
        position: relative;
        cursor: pointer;
        text-align: center;
        line-height: 1rem;
        list-style: none;
        list-style-position: inside;
      }
    }
    .content {
      width: 100%;
      position: relative;
      .banner {
        position: relative;
        width: 100%;
        img {
          width: 100%;
          display: block;
        }
      }
    }
    article {
      padding: 1.2rem 1.39rem;
      aside,
      details,
      figcaption,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }
      .logo {
        width: 1.386rem;
        height: 0.343rem;
        margin-bottom: 0.26rem;
      }
      p {
        line-height: 1.5;
        font-size: 0.26rem;
        color: #787878;
        margin-top: 0.2rem;
      }
    }
    .time-line {
      padding: 0.8rem 1.39rem;
      .time-line-item {
        display: flex;
        .year {
          width: 1.6rem;
          font-size: 0.48rem;
          color: #333;
          font-weight: bold;
        }
        .detail {
          flex: 1;
          margin-left: 1rem;
          .item {
            position: relative;
            padding-left: 1.7rem;
            padding-bottom: 0.8rem;
          }
          .item:before {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0.12rem;
            left: 0;
            height: 100%;
            border-right: 0.02rem solid #f3f3f3;
            z-index: 1;
          }
          h4 {
            line-height: 0.4rem;
            margin-bottom: 0.16rem;
            color: #787878;
            font-weight: 600;
          }
          .item:after {
            content: "";
            display: inline-block;
            position: absolute;
            width: 0.26rem;
            height: 0.26rem;
            background-color: #e0e0e0;
            border-radius: 50%;
            left: -0.12rem;
            top: 0.12rem;
            z-index: 1;
          }
        }
      }
    }
    .team-content {
      padding: 0 1.39rem 1.2rem 1.39rem;
      margin-top: -1.8rem;
      position: relative;
      z-index: 1;

      .item {
        display: flex;
        margin-bottom: 1.2rem;
        img {
          width: 4rem;
          height: 4.8rem;
        }
        .detail {
          flex: 1;
          margin-left: 1.2rem;
          padding-top: 0.4rem;
          h2 {
            font-size: 0.48rem;
            color: #333;
            line-height: 0.7rem;
            font-weight: 500;
          }
          h3 {
            font-size: 0.36rem;
            color: #555;
            line-height: 0.5rem;
          }
          p {
            line-height: 3;
            font-size: 0.28rem;
            color: #787878;
            margin-top: 0.8rem;
          }
        }
      }
      .item:first-child h2 {
        color: #fff;
      }
      .item:first-child h3 {
        color: #fff;
      }
    }
    .product-content {
      padding: 1.2rem 1.39rem;
      h1 {
        position: relative;
        display: inline-block;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.72rem;
        color: #333;
        z-index: 1;
        margin-bottom: 0.04rem;
        font-weight: normal;
      }
      .split {
        width: 0.4rem;
        height: 0.02rem;
        margin: 0.4rem 0 0.8rem;
        background: #d8d8d8;
      }
      p {
        line-height: 1.5;
        font-size: 0.28rem;
        color: #787878;
        margin-top: 0.4rem;
      }
      .product-intro {
        margin-top: 0.64rem;
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title {
            font-size: 0.36rem;
            color: #333;
          }
          span {
            display: inline-block;
            width: 2rem;
            height: 0.64rem;
            line-height: 0.64rem;
            text-align: center;
            font-size: 0.28rem;
            cursor: pointer;
            margin-left: 0.04rem;
            color: #999;
            border: 0.02rem solid #fff;
          }

          .active {
            border: 0.01rem solid #333;
            border-radius: 0.17rem;
            font-weight: 500;
            color: #333;
          }
        }
      }
    }
    .product-items {
      margin-top: 0.64rem;
      .item {
        background-color: #fafcfd;
        padding: 0.8rem;
        margin-bottom: 0.84rem;
        display: flex;
        justify-content: space-between;
        .product-icon {
          width: 1.8rem;
          height: 1.8rem;
        }
        .detail {
          margin-left: 0.64rem;
          padding-top: 0.26rem;
          flex: 1;
        }
        h4 {
          font-size: 0.32rem;
          line-height: 0.44rem;
          color: #333;
          font-weight: 300;
          margin-bottom: 0.64rem;
        }
        .text {
          color: #999;
        }
        img {
          cursor: pointer;
          max-width: 1.8rem;
        }
        a {
          font-size: 0.48rem;
          color: #333;
          line-height: 0.66rem;
          font-weight: 500;
          margin-bottom: 0.1rem;
          display: inline-block;
        }
        .business {
          width: 3.6rem;
          text-align: center;
          line-height: 2.4rem;
        }
      }
    }
    .society-navbar {
      position: absolute !important;
      top: 9.8rem;
      z-index: 100;
      right: 1.1rem;
      ul {
        list-style: none;
        list-style-position: inside;
      }
      ul li {
        display: inline-block;
        height: 0.64rem;
        line-height: 0.64rem;
        text-align: center;
        font-size: 0.28rem;
        cursor: pointer;
        margin-left: 0.04rem;
        color: #999;
        padding: 0 0.32rem;
        border: 0.02rem solid #fff;
      }
      .active {
        border: 0.02rem solid #333;
        border-radius: 0.34rem;
        font-weight: 500;
        color: #333;
      }
    }
    .article-content-about {
      padding: 1.2rem 1.39rem;
      h1 {
        position: relative;
        display: inline-block;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.72rem;
        color: #333;
        z-index: 1;
        margin-bottom: 0.04rem;
        font-weight: normal;
      }
      .split {
        width: 0.4rem;
        height: 0.02rem;
        margin: 0.4rem 0 0.8rem;
        background: #d8d8d8;
      }
      p {
        line-height: 1.5;
        font-size: 0.28rem;
        color: #787878;
        margin-top: 0.4rem;
      }
      h2,
      h3 {
        font-size: 0.36rem;
        font-weight: 500;
        margin-top: 1.28rem;
        color: #333;
      }
      img {
        margin-top: 0.48rem;
        width: 10rem;
      }
    }
  }
}
</style>

